<!-- src/components/CaptchaCode.vue -->
<template>
  <div class="captcha-container">
    <canvas 
      ref="captchaCanvas" 
      :width="width" 
      :height="height"
      @click="refresh"
      class="captcha-canvas"
      :title="'点击刷新验证码'"
    ></canvas>
    <div class="refresh-btn" @click="refresh" title="刷新验证码">
      <el-icon><Refresh /></el-icon>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue'
import { Refresh } from '@element-plus/icons-vue'

export default {
  name: 'CaptchaCode',
  props: {
    width: {
      type: Number,
      default: 120
    },
    height: {
      type: Number,
      default: 40
    },
    length: {
      type: Number,
      default: 4
    },
    // 验证码字符集
    chars: {
      type: String,
      default: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    }
  },
  emits: ['update:code'],
  setup(props, { emit }) {
    const captchaCanvas = ref(null)
    const captchaCode = ref('')
    
    // 生成随机验证码
    const generateCode = () => {
      let code = ''
      for (let i = 0; i < props.length; i++) {
        code += props.chars[Math.floor(Math.random() * props.chars.length)]
      }
      captchaCode.value = code
      emit('update:code', code)
      return code
    }
    
    // 生成随机颜色
    const randomColor = (min = 0, max = 255) => {
      const r = Math.floor(Math.random() * (max - min) + min)
      const g = Math.floor(Math.random() * (max - min) + min)
      const b = Math.floor(Math.random() * (max - min) + min)
      return `rgb(${r},${g},${b})`
    }
    
    // 绘制验证码
    const drawCaptcha = () => {
      const canvas = captchaCanvas.value
      if (!canvas) return
      
      const ctx = canvas.getContext('2d')
      const code = generateCode()
      
      // 清空画布
      ctx.clearRect(0, 0, props.width, props.height)
      
      // 绘制背景
      ctx.fillStyle = randomColor(240, 255)
      ctx.fillRect(0, 0, props.width, props.height)
      
      // 绘制干扰线
      for (let i = 0; i < 8; i++) {
        ctx.strokeStyle = randomColor(100, 200)
        ctx.lineWidth = Math.random() * 2
        ctx.beginPath()
        ctx.moveTo(Math.random() * props.width, Math.random() * props.height)
        ctx.lineTo(Math.random() * props.width, Math.random() * props.height)
        ctx.stroke()
      }
      
      // 绘制干扰点
      for (let i = 0; i < 50; i++) {
        ctx.fillStyle = randomColor(150, 200)
        ctx.beginPath()
        ctx.arc(
          Math.random() * props.width,
          Math.random() * props.height,
          Math.random() * 2,
          0,
          2 * Math.PI
        )
        ctx.fill()
      }
      
      // 绘制验证码文字
      const fontSize = props.height * 0.6
      ctx.font = `${fontSize}px Arial`
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'
      
      const charWidth = props.width / props.length
      
      for (let i = 0; i < code.length; i++) {
        const char = code[i]
        const x = charWidth * i + charWidth / 2
        const y = props.height / 2
        
        // 随机角度
        const angle = (Math.random() - 0.5) * Math.PI / 6
        
        ctx.save()
        ctx.translate(x, y)
        ctx.rotate(angle)
        
        // 随机颜色
        ctx.fillStyle = randomColor(50, 150)
        ctx.fillText(char, 0, 0)
        
        ctx.restore()
      }
    }
    
    // 刷新验证码
    const refresh = () => {
      drawCaptcha()
    }
    
    // 获取验证码值
    const getCode = () => {
      return captchaCode.value
    }
    
    // 验证输入的验证码
    const verify = (inputCode) => {
      return inputCode.toLowerCase() === captchaCode.value.toLowerCase()
    }
    
    // 监听画布尺寸变化
    watch([() => props.width, () => props.height], () => {
      drawCaptcha()
    })
    
    onMounted(() => {
      drawCaptcha()
    })
    
    return {
      captchaCanvas,
      refresh,
      getCode,
      verify,
      Refresh
    }
  }
}
</script>

<style scoped>
.captcha-container {
  position: relative;
  display: inline-block;
}

.captcha-canvas {
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.captcha-canvas:hover {
  border-color: #409eff;
}

.refresh-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: #666;
  transition: all 0.3s;
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #409eff;
}
</style>